import type { Meta, StoryObj } from '@storybook/react';
import Calendar, { CalendarProps } from '.';
import dayjs from 'dayjs';

const meta = {
  title: '数据输入/Calendar 日期',
  component: Calendar,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    value: {
      control: 'date',
    }
  },
} satisfies Meta<typeof Calendar>;

export default meta;

type Story = StoryObj<typeof meta>;

const renderCalendar = (args: CalendarProps) => {
  if (typeof args.value === 'number') {
    return <Calendar {...args} value={dayjs(new Date(args.value))} />;
  }

  return <Calendar {...args} />;
};

export const Value: Story = {
  name: '基本使用',
  args: {
    value: dayjs(),
  },
  render: renderCalendar,
};

export const DateRender: Story = {
  name: '自定义渲染',
  args: {
    value: dayjs('2023-11-08'),
    dateRender(currentDate) {
      return <div>日期{currentDate.date()}</div>;
    },
  },
};

export const DateInnerContent: Story = {
  name: '内容自定义渲染',
  args: {
    value: dayjs('2023-11-08'),
    dateInnerContent(currentDate) {
      return <div>日期{currentDate.date()}</div>;
    },
  },
};

export const Locale: Story = {
  name: '多语言',
  args: {
    value: dayjs('2023-11-08'),
    locale: 'en-US',
  },
};
